<template>
  <div>
    <!-- 计算属性：
          使用场景：依赖一个或者多个值产生一个新的值
          用法:
            computed:{
             方法名(){
              return 新的值
             }
            }
            访问:

            {{ 方法名 }}
           js: this.方法名
           特点：缓存特性，依赖的值改变，它产生的新值也会立马改变

           v-model='计算属性'

  -->
    <div>人民币:{{ money }}</div>
    <button @click="money++">修改money</button>
    <h2>{{ dollor }}</h2>
    <h2>{{ dollor }}</h2>
    <h2>{{ dollor }}</h2>
    美元<input v-model="dollor" type="text">
    <div>美元{{ dollor2() }}</div>
    <div>美元{{ dollor2() }}</div>
    <div>美元{{ dollor2() }}</div>
    <div>美元{{ dollor2() }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      money: 100
    }
  },
  computed: {
    // dollor() {
    //   return this.money * 7
    // }
    dollor: {
      get() {
        console.log('计算属性')
        return this.money * 7
      },
      set(value) {
        this.money = value / 7
      }
    }
  },
  methods: {
    dollor2() {
      console.log('methods')
      return this.money * 7
    }
  }
}
</script>
<style></style>
>
